<template>
 <!-- @mouseenter="unfold()" @mouseleave="zoom()" -->
   <div id="Card"  >
       <div id="Head"  class="overflow flex">
          <div id="title" class="overflow">{{title}}</div>
          <div id="subtitle" class="overflow">{{subtitle | time()}}</div>
       </div>
       <slot name="body"/>
   </div>
</template>
<script>
  export default 
  {
     name :'', 
     props:['title','subtitle','CardsId','CardId','index','item'],
     methods: {
        unfold(){
            this.item.formState=1    
            this.$emit('unfold',this.CardId,this.CardsId,this.index)
        },
        zoom(){
            if( this.item.formState==1){
                // console.log('zoom')
                  this.item.formState=0
                  this.$emit('zoom',this.CardId,this.CardsId,this.index)
            }
        }
     },
  }
</script>
<style scoped lang="less">

#Card{
   box-shadow: 0 0 5px black;
   box-sizing: border-box;
}
#Head{
    width: 100%;
    height: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    color: white;
}
#title{
    text-align: left;
    width: 50%;
}
#subtitle{
    text-align: right;
    width: 50%;
    font-size: 10px;
    // color:gray;
}
</style>